<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import ranking1 from '../../../../../assets/bigScreen/ranking1.png'
import ranking2 from '../../../../../assets/bigScreen/ranking2.png'
import ranking3 from '../../../../../assets/bigScreen/ranking3.png'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    // backgroundColor: {
    //     type: 'linear',
    //     x: 0,
    //     y: 0,
    //     x2: 1,
    //     y2: 1,
    //     colorStops: [{
    //         offset: 0,
    //         color: '#0f2c70' // 0% 处的颜色
    //     }, {
    //         offset: 1,
    //         color: '#091732' // 100% 处的颜色
    //     }],
    //     globalCoord: false // 缺省为 false
    // },
    // title: {
    //     text: '品种',
    //     x: 'center',
    //     y: 'center',
    //     textStyle: {
    //         color: '#fff'
    //     }
    // },
    tooltip: {
        trigger: 'item',
        // borderColor: 'rgba(255,255,255,.3)',
        // backgroundColor: 'rgba(13,5,30,.6)',
        borderWidth: 1,
        padding: 5,
        formatter: function (parms) {
            var str = parms.marker + "" + parms.data.name + "</br>" +
                "数量：" + parms.data.value + "</br>" +
                "占比：" + parms.percent + "%";
            return str;
        }
    },
    legend: {
        // type: "scroll",
        // orient: 'vertical',
        // left: 'middle',
        // align: 'auto',
        // top: 'middle',
        bottom: 'bottom',
        width:'300px',
        textStyle: {
            color: '#fff'
        },

        data: ["企业", "其他", "独立科研机构", "医疗机构", "大专院校"]
    },
    series: [{
        type: 'pie',
        z: 3,
        center: ['50%', '40%'],
        radius: ['20%', '40%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            normal: {
                color: function (params) {
                    return ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'][params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            normal: {
                    // position: 'top',
                    // fontSize: '24',
                    color: '#D8D8D8',
                },
            rich: {
                hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                },
                a: {
                    padding: [-30, 15, -20, 15]
                }
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: [{
            name: "企业",
            value: "416.0"
        }, {
            name: "其他",
            value: "56.0"
        }, {
            name: "独立科研机构",
            value: "111.0"
        }, {
            name: "医疗机构",
            value: "242.0"
        }, {
            name: "大专院校",
            value: "236.0"
        }]
    }, {
        name: '第一层环',
        type: 'pie',
        z: 2,
        tooltip: {
            show: false
        },
        center: ['50%', '40%'],
        radius: ['40%', '50%'],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
            normal: {
                // shadowBlur: 40,
                // shadowColor: 'rgba(0, 255, 255,.3)',
                color: 'rgba(1,15,80,.4)',
            },
            emphasis: {
                color: 'rgba(1,15,80,.4)',
            }
        },
        label: {
            show: false
        },
        data: [100]
    }, {
        name: '第二层环',
        type: 'pie',
        z: 1,
        tooltip: {
            show: false
        },
        center: ['50%', '40%'],
        radius: ['50%', '70%'],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
            normal: {
                // shadowBlur: 40,
                // shadowColor: 'rgba(0, 255, 255,.3)',
                color: 'rgba(2,60,85,.2)',
            },
            emphasis: {
                color: 'rgba(2,60,85,.2)',
            }
        },
        label: {
            show: false
        },
        data: [100]
    }]
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
